<template>
	<view class="container">
		<view class="tui-cmt-title">精彩评论（{{comment.length}}）</view>
		
		<view class="tui-cmtbox">
			<view class="tui-cmt-cell" v-for="(item, index) in comment" :key="index">
				<image :src="item.avatar" class="tui-avatar"></image>
				<view class="tui-cmt-detail">
					<view class="tui-header-box">
						<view class="tui-cmt-nickname-com">{{ item.nickname }}</view>
						<!-- <view class="tui-fabulous" :class="[item.isFabulous ? 'tui-primary' : '']" :id="index" @tap="cmtFabulous">
							<text>{{ item.fabulous == 0 ? '赞' : item.fabulous }}</text>
							<tui-icon :name="iconName(item.isFabulous)" :size="15" :color="itemIconColor(item.isFabulous)"></tui-icon>
						</view> -->
					</view>
					<view class="tui-cmt-content">{{ item.content }}</view>
					<view class="tui-reply-box" v-if="item.replayNum > 0">
						<tui-list-cell
							backgroundColor="#f2f2f2"
							:size="28"
							v-for="(items, index2) in item.children"
							:key="index2"
							:unlined="item.replayNum < 2 && item.children.length - 1 == index"
							@tap="cmtReply"
						>
							<view class="tui-flex-1 tui-reply-nickname">{{ items.nickname }}</view>
							<view class="tui-flex-1">{{ items.content }}</view>
						</tui-list-cell>
						<tui-list-cell padding="20rpx 30rpx" backgroundColor="#f2f2f2" :size="28" :unlined="true" v-if="item.replayNum > 2" @tap="cmtReply">
							<view class="tui-flex-1  tui-cell-last">
								<text>共{{ item.replayNum }}条回复</text>
								<tui-icon name="arrowright" :size="22" color="#5677fc"></tui-icon>
							</view>
						</tui-list-cell>
					</view>
					<view class="tui-footer">
						{{ item.dtime }}
						<view class="tui-primary tui-ml" hover-class="opcity" :hover-start-time="150" @tap="btnCmt(item.id)">回复</view>
					</view>
				</view>
			</view>
			<view v-if="comment.length == 0">
				<tui-no-data :fixed="false" imgUrl="/static/img/img_nodata.png">暂无数据</tui-no-data>
			</view>
		</view>
		
		<!-- 底部回复 -->
		<view class="tui-operation">
			<view class="tui-operation-left tui-col-7"><view class="tui-btn-comment" @tap="btnCmt()">发表你的评论...</view></view>
			<view class="tui-operation-right tui-right-flex tui-col-5">
				<view class="tui-operation-item" hover-class="tui-opcity" :hover-stay-time="150" @tap="cmtAll">
					<tui-icon name="message" :size="30" color="#444"></tui-icon>
					<tui-badge absolute type="white_primary" :scaleRatio="0.7"></tui-badge>
				</view>
				<view class="tui-operation-item" @tap="collectTap">
					<tui-icon  :name="collect ? 'star-fill' : 'star'" :size="29" :color="collect ? '#5677fc' : '#444'"></tui-icon>
				</view>
				<view class="tui-operation-item" hover-class="tui-opcity" :hover-stay-time="150" @tap="btnShare">
					<button open-type="share" class="tui-share-btn"><tui-icon name="share" :size="31" color="#444"></tui-icon></button>
				</view>
			</view>
		</view>
		</view>
		
		
	</view>

	
	
</template>

<script>
	
	export default {
		props:['tid', 'isCollect'],
		data() {
			return {
				comment: [],
				collect: '是',
			};
		},
		computed:{
			iconColor() {
				return this.isFabulous ? '#5677fc' : '#333'
			},
			itemIconColor() {
				return function(isFabulous) {
					return isFabulous ? '#5677fc' : '#9a9a9a'
				}
			},
			iconName() {
				return function(isFabulous) {
					return isFabulous ? 'agree-fill' : 'agree'
				}
			}
		},
		watch: {
			tid: function(val){
				this.getComments(this.tid);
				this.collect = this.isCollect;
			}
		},
		methods: {
			getComments(tid){
				let _this = this;
				_this.$api.getComment({tid: tid}).then(res => {
					_this.comment = res.result;
				})
			},
			refresh(){
				this.getComments(this.tid);
			},
			btnCmt(parentId){
				
				let params = "";
				params = params + "tid=" + this.tid;
				if(parentId != '' && parentId != undefined){
					params = params + "&" + 'parentId=' + parentId;
				}
				uni.navigateTo({
					url: '/pages/index/article/comment/comment-reply?' + params
				})
			},
			collectTap(){
				let _this = this;
				if(_this.collect == '是'){
					_this.$api.removeCollect({tid: _this.tid}).then(res => {
						if(res.success){
							_this.collect = '';
							uni.showToast({
								title: res.result,
								icon: 'none',
								duration: 2000
							});
						}
					})
				}else {
					_this.$api.addCollect({tid: _this.tid}).then(res => {
						if(res.success){
							_this.collect = '是';
							uni.showToast({
								title: res.result,
								icon: 'none',
								duration: 2000
							});
						}
					})
				}
			}
		}
	};
</script>

<style lang="scss">
	@import './comment.css'
</style>
